<template>
	<div class="data-analysis">
		
		<el-tabs class="data-analysis-tabs" v-model="activeTab" @tab-click="tabClick">
			<el-tab-pane class="overview" label="概况" name="overview">
				
				<!-- 日期选择 -->
				<div class="search-toolbar">

					<el-radio-group v-model="dateRadio" size="mini" @change="dateSelectChange">
						<el-radio-button :label="7">7天</el-radio-button>
						<el-radio-button :label="14">14天</el-radio-button>
						<el-radio-button :label="30">30天</el-radio-button>
					</el-radio-group>

					<el-date-picker
						v-model="searchDate"
						class="analysis-date-picker"
						size="mini"
						type="datetimerange"
						range-separator="-"
						start-placeholder="开始时间"
						end-placeholder="结束日期"
						format="yyyy-MM-dd"
						value-format="yyyy-MM-dd"
					></el-date-picker>
				</div>

				<!-- 概况 -->
				<div class="analysis-brief">
					
					<div class="brief-item" v-for="(item,key) in brief" :key="key">
						<span class="num">{{item.value}}</span>
						<span class="label">{{item.label}}</span>
					</div>

				</div>

				<!-- 数据详情--图表-->
				<div class="data-detail-chart">
					<div class="block-title">数据详情</div>
					<div ref="detailChart" id="detail-chart-box" style="width: 100%;height: 400px"></div>
				</div>


				<!-- 详情表格 -->
				<div class="data-detail-table-wrap">
					<el-table 
						size="mini" 
						:data="detailTable" 
						stripe
						:header-cell-style="tableHeaderSty"
						:cell-style="tableCellSty"
						style="width:100%">
						
						<el-table-column
							prop="statDate"
							label="日期"
						></el-table-column>

						<el-table-column
							prop="recommendCount"
							label="推荐量"
						></el-table-column>

						<el-table-column
							prop="readCount"
							label="阅读量"
						></el-table-column>

						<el-table-column
							prop="articleCount"
							label="粉丝阅读量"
						></el-table-column>

						<el-table-column
							prop="commentCount"
							label="评论量"
						></el-table-column>

						<el-table-column
							prop="forwardCount"
							label="转发量"
						></el-table-column>

						<el-table-column
							prop="collectCount"
							label="收藏量"
						></el-table-column>

					</el-table>

					<el-pagination
						class="table-pagination"
						small
						:current-page="briefPage.currentPage"
						:page-size="brief.pageSize"
					  	background
					  	layout="prev, pager, next"
					  :total="briefPage.total">
					</el-pagination>
				</div>


			</el-tab-pane>
			<el-tab-pane label="图文分析" name="graphic">
				
				<!-- 日期选择 -->
				<div class="search-toolbar">

					<el-radio-group v-model="graphicDateRadio" size="mini" @change="graphicRadioChange">
						<el-radio-button :label="7">7天</el-radio-button>
						<el-radio-button :label="14">14天</el-radio-button>
						<el-radio-button :label="30">30天</el-radio-button>
					</el-radio-group>

					<el-date-picker
						v-model="graphicSearchDate"
						class="analysis-date-picker"
						size="mini"
						type="datetimerange"
						range-separator="-"
						start-placeholder="开始时间"
						end-placeholder="结束日期"
						format="yyyy-MM-dd"
						value-format="yyyy-MM-dd"
					></el-date-picker>
				</div>

				
				<!-- 详情表格 -->
				<div class="data-detail-table-wrap">
					<el-table 
						size="mini" 
						:data="graphicDetailTable" 
						stripe
						:header-cell-style="tableHeaderSty"
						:cell-style="tableCellSty"
						style="width:100%">
						
						<el-table-column
							prop="title"
							label="标题"
							width="400px"
						></el-table-column>

						<el-table-column
							prop="recommendCount"
							label="推荐量"
						></el-table-column>

						<el-table-column
							prop="readCount"
							label="阅读量"
						></el-table-column>

						<el-table-column
							prop="articleCount"
							label="粉丝阅读量"
						></el-table-column>

						<el-table-column
							prop="commentCount"
							label="评论量"
						></el-table-column>

						<el-table-column
							prop="forwardCount"
							label="转发量"
						></el-table-column>

						<el-table-column
							prop="collectCount"
							label="收藏量"
						></el-table-column>

					</el-table>

					<el-pagination
						class="table-pagination"
						small
						:current-page="graphicPage.currentPage"
						:page-size="graphicPage.pageSize"
					  	background
					  	layout="prev, pager, next"
					  :total="graphicPage.total">
					</el-pagination>

				</div>

			</el-tab-pane>
		</el-tabs>

	</div>
</template>


<script>
import { getGeneral, detailChart, detailTable, graphicTable } from "@/api/dataAnalysis";
import { validatenull } from "@/utils/validate";
import { deepClone } from "@/utils/util";
import echarts from 'echarts';

export default{

	data(){
		return{
			activeTab:"overview",
			dateRadio:7,			//概况
			graphicDateRadio:7,		//图文
			searchDate:"",			//概况
			graphicSearchDate:"",	//图文
			brief:[{label:"文章量",value:0},{label:"推荐量",value:0},{label:"阅读量",value:0},{label:"粉丝阅读量",value:0},{label:"评论量",value:0}],
			detailChart:null,
			chartOption:{
				tooltip:{
					trigger:'axis'
				},
				legend:{
					data:["推荐量","阅读量","粉丝阅读量","评论量","转发量","收藏量"]
				},
				grid: {
			        left: '3%',
			        right: '4%',
			        bottom: '3%',
			        containLabel: true
			    },
			    toolbox: {
			        feature: {
			            saveAsImage: {}
			        }
			    },
			    xAxis: {
			        type: 'category',
			        boundaryGap: false,
			        data: ['周一','周二','周三','周四','周五','周六','周日']
			    },
			    yAxis: {
			        type: 'value'
			    },
			    series: [
			        {
			            name:'推荐量',
			            type:'line',
			            stack: '总量',
			            data:[120, 132, 101, 134, 90, 230, 210]
			        },
			        {
			            name:'阅读量',
			            type:'line',
			            stack: '总量',
			            data:[220, 182, 191, 234, 290, 330, 310]
			        },
			        {
			            name:'粉丝阅读量',
			            type:'line',
			            stack: '总量',
			            data:[150, 232, 201, 154, 190, 330, 410]
			        },
			        {
			            name:'评论量',
			            type:'line',
			            stack: '总量',
			            data:[320, 332, 301, 334, 390, 330, 320]
			        },
			        {
			            name:'转发量',
			            type:'line',
			            stack: '总量',
			            data:[820, 932, 901, 934, 1290, 1330, 1320]
			        },
			        {
			            name:'收藏量',
			            type:'line',
			            stack: '总量',
			            data:[120, 450, 219, 768, 345, 789, 332]
			        }
			    ]
			},
			//概况表格数据
			detailTable:[
				{
		            "articleCount": 0,
		            "collectCount": 0,
		            "commentCount": 0,
		            "forwardCount": 1,
		            "readCount": 0,
		            "recommendCount": 0,
		            "statDate": "2019-10-01",
		        },{
		            "articleCount": 0,
		            "collectCount": 0,
		            "commentCount": 0,
		            "forwardCount": 1,
		            "readCount": 0,
		            "recommendCount": 0,
		            "statDate": "2019-10-02",
		        },{
		            "articleCount": 0,
		            "collectCount": 0,
		            "commentCount": 0,
		            "forwardCount": 1,
		            "readCount": 0,
		            "recommendCount": 0,
		            "statDate": "2019-10-03",
		        },{
		            "articleCount": 0,
		            "collectCount": 0,
		            "commentCount": 0,
		            "forwardCount": 1,
		            "readCount": 0,
		            "recommendCount": 0,
		            "statDate": "2019-10-04",
		        },{
		            "articleCount": 0,
		            "collectCount": 0,
		            "commentCount": 0,
		            "forwardCount": 1,
		            "readCount": 0,
		            "recommendCount": 0,
		            "statDate": "2019-10-05",
		        },{
		            "articleCount": 0,
		            "collectCount": 0,
		            "commentCount": 0,
		            "forwardCount": 1,
		            "readCount": 0,
		            "recommendCount": 0,
		            "statDate": "2019-10-06",
		        },{
		            "articleCount": 0,
		            "collectCount": 0,
		            "commentCount": 0,
		            "forwardCount": 1,
		            "readCount": 0,
		            "recommendCount": 0,
		            "statDate": "2019-10-07",
		        },

			],
			//图文表格数据
			graphicDetailTable:[],
			tableHeaderSty:{
				"backgroundColor":"#f4f5f6",
				"padding":"15px 0",
			},
			tableCellSty:{
				"padding":"15px 0",
			},
			//概况表格分页
			briefPage: {
	        	pageSize: 10,
	        	currentPage: 1,
	        	total: 0
	      	},
	      	//图文分析表格分页
			graphicPage: {
	        	pageSize: 10,
	        	currentPage: 1,
	        	total: 0
	      	},
		}
	},
	mounted(){
		var _this = this;
		//初始化数据请求日期，并请求数据
		this.init(function(){

			//总览数据
			_this.getGeneralData();

			//请求图表数据
			_this.getDetailChartData();

			//请求表格数据
			_this.getBriefTableData();

			//请求图文数据
		})

		
	},
	methods:{
		//初始化数据请求日期，并请求数据
		init(callback){
			this.searchDate = [this.getDateBefore(7),this.getDateBefore()];
			this.graphicSearchDate = [this.getDateBefore(7),this.getDateBefore()];
			if(callback && typeof callback == 'function'){
				callback()
			}
		},
		//请求概况数据
		getGeneralData(){
			getGeneral(this.searchDate[0],this.searchDate[1]).then((res)=>{
				console.log("--------请求概况初始数据----------")
				console.log(res)
				var result = res.data.data;
				if(!validatenull(result)){

					//文章量
					this.brief[0].value = result["articleCount"];
					//推荐量
					this.brief[1].value = result["recommendCount"];
					//阅读量
					this.brief[2].value = result["readCount"];
					//粉丝阅读量
					this.brief[3].value = result["fansReadCount"];
					//评论量
					this.brief[4].value = result["commentCount"];
				}

				
			})
		},
		
		//概况数据详情图表
		dataDetailChart(){
			var _this = this;
			this.detailChart = echarts.init(_this.$refs.detailChart);

			this.detailChart.setOption(_this.chartOption);
		},
		//获取概况图表数据详情
		getDetailChartData(){
			detailChart(this.searchDate[0],this.searchDate[1]).then((res)=>{
				console.log("--------请求详情图表数据----------")
				console.log(res)
				var result = res.data.data;
				this.handleChartData(result);
				
			})
		},
		//处理概况图表数据
		handleChartData(data){
			var result = deepClone(data);
			var date_arr = [];
			//推荐量recommendCount
			var recommend_arr = [];
			//阅读量readCount
			var read_arr = [];
			//粉丝阅读量fansReadCount
			var fans_arr = [];
			//评论量commentCount
			var comment_arr = [];
			//转发量forwardCount
			var forward_arr = [];
			//收藏量collectCount
			var collect_arr = [];
			for(var i=result.length-1;i>=0;i--){
				console.log(result[i].statDate)
				date_arr.push(result[i].statDate);
				recommend_arr.push(result[i].recommendCount);
				read_arr.push(result[i].readCount);
				fans_arr.push(result[i].fansReadCount);
				comment_arr.push(result[i].commentCount);
				forward_arr.push(result[i].forwardCount);
				collect_arr.push(result[i].collectCount);
			}

			this.chartOption.xAxis.data = date_arr;
			this.chartOption.series[0].data = recommend_arr;
			this.chartOption.series[1].data = read_arr;
			this.chartOption.series[2].data = fans_arr;
			this.chartOption.series[3].data = comment_arr;
			this.chartOption.series[4].data = forward_arr;
			this.chartOption.series[5].data = collect_arr;

			//生成图表
			this.dataDetailChart();
		},
		//获取概况表格数据
		getBriefTableData(){
			detailTable(this.briefPage.currentPage,this.briefPage.pageSize,this.searchDate[0],this.searchDate[1]).then((res)=>{
				console.log("-------概况表格数据--------")
				console.log(res)
				var result = res.data.data;
				this.briefPage.total = result.total;
				this.detailTable = result.records;
			})
		},
		//请求图文分析数据
		getGraphic(){
			graphicTable(this.briefPage.currentPage,this.briefPage.pageSize,this.graphicSearchDate[0],this.graphicSearchDate[1]).then((res)=>{
				console.log("-------概况表格数据--------")
				console.log(res)
				var result = res.data.data;
				this.graphicPage.total = result.total;
				this.graphicDetailTable = result.records;
			})
		},
		//概况选择日期
		dateSelectChange(value){
			this.searchDate = [this.getDateBefore(value),this.getDateBefore()]

		},
		//图文选择日期
		graphicRadioChange(value){
			this.graphicSearchDate = [this.getDateBefore(value),this.getDateBefore()]
		},
		//获取几天前的日期
		getDateBefore(num){
			num = (num === undefined ? 1 : num);
			var date = new Date();
			var date_str = date.getTime();
			var result_str = date_str - num*24*60*60*1000;
			var result = new Date(result_str);

			var yyyy = result.getFullYear();
			var MM = (result.getMonth()+1) > 9 ? (result.getMonth()+1) : "0"+(result.getMonth()+1);
			var dd = result.getDate() > 9 ? result.getDate() : "0"+result.getDate();
			return yyyy+"-"+MM+"-"+dd;
		},
		tabClick(tab,event){

			if(tab.name == 'graphic'){
				this.getGraphic();
			}
			
		}

	}
}	

</script>


<style>
	.data-analysis-tabs .el-tabs__item.is-active,.data-analysis-tabs .el-tabs__item:hover{
		color: #ff8100;
	}

	.data-analysis-tabs .el-tabs__active-bar{
		background-color: #ff8100;
	}



</style>

<style scoped>
	.data-analysis,.overview{
		padding: 15px;
	}

	.analysis-date-picker{
		height: 30px;
		margin-left: 10px;
	}

	.analysis-brief{
		display: flex;
		width:100%;
		margin:30px 0 50px 0;
		flex-direction: row;
		justify-content: space-between;
	}

	.analysis-brief .brief-item{
		width:18%;
		display: flex;
		justify-content: center;
		flex-direction: column;
		text-align: center;
		background-color: #f8f8f8;
		padding: 30px 20px;
		color: #333;
	}

	.analysis-brief .brief-item .num{
		font-size: 30px;
		font-weight: 700;
		margin-bottom: 20px;
	}

	.data-detail-chart{
		margin-bottom: 50px;
	}

	.data-detail-table-wrap{
		margin-top: 20px;
	}

	.block-title{
		position: relative!important;
	    font-size: 16px;
	    margin: 20px 0 15px;
	    padding-left: 10px;
	}

	.block-title:before{
		content: "";
	    position: absolute;
	    left: 0;
	    width: 3px;
	    height: 16px;
	    background: #ff8100;
	}

	.table-pagination{
		text-align: right;
		margin-top: 10px;
	}
</style>